<template>
  <div class="bg" v-loading="loading">
    <button>按钮</button>
    <el-button>按钮</el-button>
    <!-- 注册组件 -->
    <Reg v-if="flag" @my-alert="myAlert" />
    <!-- 登录 -->
    <login v-if="!flag" />
    <p v-if="flag" @click="changeFlag">已有账号，直接<a href="">登录</a></p>
    <p v-if="!flag" @click="changeFlag">没有账号，立即<a href="">注册</a></p>
    <button @click="changeFlag">{{ flag ? '去登录页面' : '去注册页面' }}</button>
    <!-- 按钮的样式 -->
    <!-- type、plain、round 和 circle -->
    <!-- 写一个主要按钮 -->
    <el-button type="primary" :disabled="flag" plain round>主要按钮</el-button>
    <el-button type="primary" :loading="loading" @click="toLogin">登录</el-button>
    <br>
    <el-checkbox v-model="checked1" label="Option 1" size="large" />
    <el-checkbox v-model="checked2" label="Option 2" size="large" disabled />
    <h1 style="text-align:center ">学员成绩表</h1>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="number" label="学号" width="90" />
      <el-table-column prop="name" label="名字" width="90" />
      <el-table-column prop="score" label="分数" />
      <el-table-column prop="assess" label="评价" width="110" />
      <el-table-column fixed="right" label="Operations" min-width="150">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleClick(scope.row)">
            Detail
          </el-button>
          <el-button link type="warning" size="small" @click="handleDelete(scope.$index, scope.row)">
            delete
          </el-button>
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)">edit</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 编辑模态框 开始 -->
     <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
      <!-- {{ form }} -->
      <el-form :model="form">
        <el-form-item label="number" :label-width="formLabelWidth">
          <el-input v-model="form.number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分数" :label-width="formLabelWidth">
          <el-input-number :min="0" :max="100" v-model="form.score" autocomplete="off" />
        </el-form-item>
        <el-form-item label="评语" :label-width="formLabelWidth">
          <el-input v-model="form.assess" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="editUser">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑模态框 结束 -->

     <!-- 添加表单 -->
     <el-button type="primary" @click="openDialog">添加学员</el-button>
     <el-dialog v-model="dialogFormVisibleAdd" title="添加学员" width="500">
      <!-- {{ form }} -->
      <el-form :model="form">
        <el-form-item label="number" :label-width="formLabelWidth">
          <el-input v-model="form.number" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分数" :label-width="formLabelWidth">
          <el-input-number :min="0" :max="100" v-model="form.score" autocomplete="off" />
        </el-form-item>
        <el-form-item label="评语" :label-width="formLabelWidth">
          <el-input v-model="form.assess" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd = false">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </div>
      </template>
    </el-dialog>
   
    <!-- 路由跳转 -->
    <div class="myRouter">
      <RouterLink to="/">Go to Home</RouterLink>
      <RouterLink to="/about">Go to About</RouterLink>
      <RouterLink to="/login">Go to Login</RouterLink>
    </div>
    <!-- 匹配到的路由展示的位置 -->
    <RouterView />
  </div>
</template>

<script setup>
const formLabelWidth = '140px'
const form = ref({});
// 编辑的模态框
const dialogFormVisible = ref(false);
const dialogFormVisibleAdd = ref(false);
import { ref } from 'vue';
import Reg from './views/Reg.vue';
import Login from '@/views/Login.vue';
// flag 为 true 显示注册页面
// flag 为 false 显示登录页面
const flag = ref(true);
const loading = ref(false);
const checked1 = ref(true);
const checked2 = ref(true);
const tableData = ref([
  {
    number: '001',
    name: '张三',
    score: '90',
    assess:'很优秀',
  },
  {
    number: '002',
    name: '李四',
    score: '92',
    assess:'优秀',
  },
  {
    number: '003',
    name: '王五',
    score: '83',
    assess:'很努力，不错',
  },
  {
    number: '004',
    name: '赵六',
    score: '98',
    assess:'666',
  },
]);
// 打开对话框
const openDialog = () => {
  dialogFormVisibleAdd.value = true;
  // isEdit.value = false;
  form.value = {
    number: '',
    name: '',
    score: '',
    assess: ''
  };
};
// 处理保存事件
const handleSave = () => {
  tableData.value.push({
      number: form.value.number,
      name: form.value.name,
      score: form.value.score,
      assess: form.value.assess
    });
    alert('添加成功');
  dialogFormVisible.value = false;
};
// 切换登录注册页面
function changeFlag () {
  flag.value = !flag.value;
}
// 父组件中声明的事件
function myAlert () {
  alert('我是父组件中的事件-myAlert');
}
// 登录
function toLogin () {
  loading.value = true;
  // 模拟登录请求
  setTimeout(() => {
    alert('登录成功');
    loading.value = false;
  }, 3000);
}
// function handleClick1(){
//     var trs = document.getElementsByClassName('tableData');
//     console.log('🤡 CC - fn3 - trs:', trs);
//     trs[trs.length - 1].remove();
//   }
const handleClick = (row) => {
  console.log("🤡 ~ handleClick ~ row.number:", row.number);
  console.log("🤡 ~ handleClick ~ row.name:", row.name);
  console.log("🤡 ~ handleClick ~ row.score:", row.score);
  console.log("🤡 ~ handleClick ~ row.assess:", row.assess);
}
const handleDelete = (index, row) => {
  console.log('Delete:', index, row);
  tableData.value.splice(index, 1);
  ElMessage.success('删除成功');
}; 
// 打开编辑表单
function handleEdit (row) {
  // console.log('🤡 CC - handleEdit - row:', row);
  form.value = row;
  dialogFormVisible.value = true
}
// 提交编辑表单
function editUser () {
  // 将数据发送到后台
  // editStudentById(form.value);
  dialogFormVisible.value = false
}
// const handleClick1 = (row) => {
//   console.log('🤡 CC - handleClick - row:', row);
//   console.log('🤡 CC - handleClick - row.name:', row.name);

// }
</script>
<style scoped>
.bg {
  /* background-image: url(./xxx.png); */
}
</style>